<template>
  <div>
    <!-- 页头 -->
    <el-page-header @back="goBack" content="详情页面"></el-page-header>
    <!-- 主体：轮播图+详细信息 -->
    <el-row>
      <!-- 轮播图 -->
      <el-col :span="14">
        <el-carousel style="background-color: #545c64; margin-top: 20px;" height="470px">
          <el-carousel-item>
            <img  :src="this.detailList.pictureUrl" style="height: 470px; width: auto;"/>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <!-- 详细信息 -->
      <el-col :span="10">
        <el-card style="margin-top: 20px; margin-left: 20px;" shadow="never">
          <div>
            <span><strong>书本详情信息</strong></span>
          </div>
          <el-col :span="12">
              <el-tag type="primary">书的ID:</el-tag>
              <el-tag type="success">书本的种类编码:</el-tag>
              <el-tag type="primary">书名称:</el-tag>
              <el-tag type="success">书价格:</el-tag>
              <el-tag type="primary">作者:</el-tag>
              <el-tag type="success">出版社:</el-tag>
              <el-tag type="primary">Created By:</el-tag>
              <el-tag type="success">Copies:</el-tag>
          </el-col>
          <el-col :span="12">
              <el-tag type="primary">{{this.detailList.bookInfoId}}</el-tag>
              <el-tag type="success">{{this.detailList.bookTypeName}}</el-tag>
              <el-tag type="primary">{{this.detailList.bookName}}</el-tag>
              <el-tag type="success">{{this.detailList.bookPrice}}</el-tag>
              <el-tag type="primary">{{this.detailList.bookAuthor}}</el-tag>
              <el-tag type="success">{{this.detailList.bookPublisher}}</el-tag>
              <el-tag type="primary">{{this.detailList.bookManagerName}}</el-tag>
              <el-tag type="success">{{this.detailList.bookCopyNumber}}</el-tag>
          </el-col>
          <el-row>
            <el-button class="btn" type="primary" size="medium" @click="showEdit">编辑信息</el-button>
            <el-button class="btn" type="warning" size="medium" @click="showCopy">添加副本</el-button>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 副本列表 -->
    <el-row>
      <el-table border stripe>
        <el-table-column label="副本id"></el-table-column>
        <el-table-column label="书库编号"></el-table-column>
        <el-table-column label="书库中书架的编号"></el-table-column>
        <el-table-column label="书架的层号"></el-table-column>
        <el-table-column label="书副本的数量"></el-table-column>
      </el-table>
    </el-row>
    <!-- 添加副本对话框 -->
    <el-dialog
      title="添加副本"
      :visible.sync="copyVisible"
      width="30%"
      :before-close="handleCopyClose">
      <!-- 内容主体区   -->
      <el-form :model="addCopyForm" :rules="addCopyRules" ref="addCopyRef" label-width="80px" size="small"
        label-position="top">
        <el-form-item label="书信息的id">
          <el-input v-model="addCopyForm.bookInfoId" disabled></el-input>
        </el-form-item>
        <el-form-item label="书库的编号">
          <el-input v-model="addCopyForm.bookLocationRoom"></el-input>
        </el-form-item>
        <el-form-item label="书库中书架的编号">
          <el-input v-model="addCopyForm.bookLocationSheet"></el-input>
        </el-form-item>
        <el-form-item label="书架的层号">
          <el-input v-model="addCopyForm.bookLocationSheetLevel"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input v-model="addCopyForm.copyNumber"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="copyVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCopy">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改信息对话框 -->
    <el-dialog
      title="修改信息"
      :visible.sync="editVisible"
      width="30%"
      :before-close="handleEditClose">
      <!-- 内容主体区   -->
      <el-form :model="addEditForm" :rules="addEditRules" ref="addEditRef" label-width="80px" size="small"
        label-position="top">
        <el-form-item label="书信息的id">
          <el-input v-model="addEditForm.bookInfoId" disabled></el-input>
        </el-form-item>
        <el-form-item label="书籍种类的id">
          <el-input v-model="addEditForm.bookType"></el-input>
        </el-form-item>
        <el-form-item label="书的名称">
          <el-input v-model="addEditForm.bookName"></el-input>
        </el-form-item>
        <el-form-item label="书籍的价格">
          <el-input v-model="addEditForm.bookPrice"></el-input>
        </el-form-item>
        <el-form-item label="书的作者">
          <el-input v-model="addEditForm.bookAuthor"></el-input>
        </el-form-item>
        <el-form-item label="书籍出版社">
          <el-input v-model="addEditForm.bookPublisher"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="editBook">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import qs from 'qs'
  export default {
    data() {
      return {
        // 控制添加副本的对话框显示与否
        copyVisible:false,
        // 控制修改图书信息的对话框显示与否
        editVisible:false,
        // 获取到的详细信息
        detailList:'',
        // 添加副本信息表单
        addCopyForm: {
          bookInfoId: 1,
          bookLocationRoom: 1,
          bookLocationSheet: 1,
          bookLocationSheetLevel: 1,
          copyNumber: 1
        },
        // 添加副本验证规则
        addCopyRules: {
          bookLocationRoom: [{
            required: true,
            message: 'Please enter bookLocationRoom',
            trigger: 'blur'
          }, ],
          bookLocationSheet: [{
            required: true,
            message: 'Please enter the bookLocationSheet',
            trigger: 'blur'
          }, ],
          bookLocationSheetLevel: [{
            required: true,
            message: 'Please enter the bookLocationSheetLevel',
            trigger: 'blur'
          }, ],
          bookName: [{
            required: true,
            message: 'Please enter the name of your book',
            trigger: 'blur'
          }, ],
        },
        // 修改一本书信息的表单
        addEditForm:{
          bookType:'',
          bookInfoId:'',
          bookName:'',
          bookPrice:'',
          bookAuthor:'',
          bookPublisher:''
        },
        // 修改一本书信息的表单验证
        addEditRules:{

        },
      }
    },
    created() {
      this.getDetail()
    },
    methods: {
      // 页头点击 退回上一页
      goBack() {
        this.$router.go(-1)
      },
      // 获取一本书详细信息
      async getDetail(){
        const {
          data: res
        } = await this.$http.get('book/info/id/'+this.$route.params.id)
        if (res.errorCode !== 0) {
          // 获取失败
          return this.$message.error('获取列表失败')
        }
        // 获取列表成功
        this.detailList = res.data
        this.addCopyForm.bookInfoId = this.detailList.bookInfoId
        // 为编辑信息对话框设置默认值
        this.addEditForm.bookType = this.$route.params.type
        this.addEditForm.bookInfoId = this.detailList.bookInfoId
        this.addEditForm.bookName = this.detailList.bookName
        this.addEditForm.bookPrice = this.detailList.bookPrice
        this.addEditForm.bookAuthor = this.detailList.bookAuthor
        this.addEditForm.bookPublisher = this.detailList.bookPublisher
      },
      // 点击按钮 显示添加副本对话框
      showCopy(){
        this.copyVisible = true
      },
      // 点击按钮 显示编辑图书信息对话框
      showEdit(){
        this.editVisible = true
      },
      // 点击按钮 添加某一书副本
      async addCopy() {
        this.$http({
          url: 'librarian/bookcopy',
          method: 'POST',
          data: qs.stringify({
            bookInfoId: this.addCopyForm.bookInfoId,
            bookLocationRoom: this.addCopyForm.bookLocationRoom,
            bookLocationSheet: this.addCopyForm.bookLocationSheet,
            bookLocationSheetLevel: this.addCopyForm.bookLocationSheetLevel,
            copyNumber: this.addCopyForm.copyNumber
          }),
          withCredentials: true
        }).then(res => {
          this.$message.success('Add copy success')
          this.copyVisible = false
        }).catch(err => {
          this.$message.error('Error')
        })
      },
      // 添加副本对话框关闭后
      handleCopyClose(){
        // 清理验证信息
        this.$refs.addCopyRef.resetFields()
      },
      // 修改图书信息对话框关闭后
      handleEditClose(){
        // 清理信息
        this.$refs.addEditRef.resetFields()
      },
      // 点击按钮 提交修改图书信息表单
      async editBook(){
        this.$refs.addEditRef.validate(async valid => {
          if (!valid) return;
          // 发起请求
          this.$http({
            url:'book/info/'+this.addEditForm.bookInfoId,
            method:'PUT',
            data:qs.stringify({
              bookInfoId: this.addEditForm.bookInfoId,
              bookType: this.addEditForm.bookType,
              bookName: this.addEditForm.bookName,
              bookPrice: this.addEditForm.bookPrice,
              bookAuthor: this.addEditForm.bookAuthor,
              bookPublisher: this.addEditForm.bookPublisher,
            }),
            withCredentials: true
          }).then(res=>{
            this.$message.success('成功')
            this.getDetail()
            this.editVisible = false
          }).catch(err=>{
            this.$message.error('失败')
          })

        })
      },
      // 获取副本信息
      getCopies(){
        
      },
    }
  }
</script>

<style lang="less" scoped>
  .el-tag{
    font-size: 18px;
    display: block;
    width: 200px;
    margin-top: 10px;
  }
  .btn{
    margin-top: 30px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
  }
</style>
